<template>
    <div class="comment">
        <div class="shopPage" v-if="pageTitle.length>0">
            <p style="color: #7b7f82;font-size: 0.28rem;">商品评价（{{pageTitle.length}}）</p>
            <div class="userTitle" v-for="(item,index) in pageTitle">
                <dl>
                    <dt>
                        <van-image
                                round
                                width="0.5rem"
                                height="0.5rem"
                                :src="item.head"
                        />
                    </dt>
                    <dd>
                        {{item.nickname}}
                    </dd>
                </dl>
                <p class="pageMessage">{{item.content}}</p>
                <p>{{item.times}}</p>
            </div>
        </div>
        <div class="shopComment" v-if="pageTitle.length < 1">
            <p>{{title}}</p>
        </div>
    </div>
</template>
<script>
    import {getUserComment} from "../../api/list/list";

    export default {
        name:'Comment',
        data(){
            return{
                pageTitle:[],
                title:''
            }
        },
        created(){
            const testPage = {
                gid:Number(this.$route.query.gid),
                token:'1ec949a15fb709370f',
                page:1
            }
            console.log(testPage)
            getUserComment(testPage).then((res)=>{
                if(res.data.data == '没有数据'){
                    this.pageTitle = []
                    this.title = '没有评论！！！'
                }else{
                    this.pageTitle = res.data.data

                }
                console.log(res)
            })
        }
    }
</script>
<style lang="less" scoped>
    .comment{
        width: 100%;
        overflow: auto;
        .shopPage{
            width: 100%;
            background: white;
            margin-top: 0.2rem;
            padding: 0.2rem 0.6rem 0.2rem 0.2rem;
            box-sizing: border-box;
            .lookMore{
                text-align: center;
                margin-top: 0.2rem;
                button{
                    width: 2rem;
                    border: 1px solid #d50a17;
                    background: white;
                }
            }
            .userTitle{
                margin-top: 0.1rem;
                dl{
                    width: 100%;
                    display: flex;
                    dt{
                        width: 0.5rem;
                    }
                    dd{
                        text-align: left;
                        padding-left: 0.1rem;
                        box-sizing: border-box;
                        line-height: 0.5rem;
                    }
                }
                .pageMessage{
                    font-weight: 700;
                }
                p:last-child{
                    color: #7b7f82;
                }
            }

        }
        .shopComment{
            background: white;
            text-align: center;
            margin-top: 0.6rem;
            font-size: 0.32rem;
            padding: 0.2rem 0;
            box-sizing: border-box;
        }
    }
</style>